<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :z-index="1000"
    :mask-closable="false"
    :destroy-on-close="true"
    @close="onClose"
  >
    <TaskTitle
      icon-name="To do"
      title-name="商机详情-立项结果确认"
      color="blue"
    />
    <div class="list-container">
      <div class="progress-container">
        <TitleSecondary title="商机阶段流程图" />
        <ProgressBusinessStatus />
      </div>
      <ProgressBusiness :data="nodeFlowChartList" />
      <TitleSecondary title="基本信息" />
      <FormBusinessList :form="form" />
      <ProductList :data-source="detail.opportunityProductList" />
      <ContactList :data-source="detail.opportunityContactList" />
      <SalesTeamList :data-source="detail.opportunitySalesTeamList" />
      <ContractList :data-source="detail.opportunityContractList" />
      <VisitList :data-source="detail.visitList" />
      <AttachList :data-source="detail.attachmentList" />
      <TitleSecondary title="立项结果确认" />
      <ApprovalBusinessInfo
        ref="approval"
        :opportunity-stage-list="detail.opportunityStageList"
        :business-node="detail.stage"
      />
      <TableBusinessNode :data-source="detail.opportunityStageList" />
      <ProgressLog :list="operationLogInformation" />
      <BottomLine />
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
    <DialogTransferAdiminClue
      :visible.sync="visibleTransfer"
      :plan-id="planId"
      type="business"
      @change="onClose"
    />
  </p-drawer>
</template>

<script>
import {
  getOperationLog,
  postBusinessAudit,
  postCreateOrUpdate,
  getProcessNode,
  postBusinessTransfer,
} from '@/api/business';
import ProgressBusinessStatus from '@/components/task/ProgressBusinessStatus.vue';
import ProgressBusiness from '@/components/task/ProgressBusiness.vue';
import FormBusinessList from '@/components/task/FormBusinessList.vue';
import ProductList from '@/components/table/ProductList.vue';
import ContactList from '@/components/table/ContactList.vue';
import SalesTeamList from '@/components/table/SalesTeamList.vue';
import ContractList from '@/components/table/ContractList.vue';
import VisitList from '@/components/table/VisitList.vue';
import AttachList from '@/components/table/AttachList.vue';
import ApprovalBusinessInfo from '@/components/task/ApprovalBusinessInfo.vue';
import TableBusinessNode from './TableBusinessNode.vue';
import ProgressLog from '@/components/task/ProgressLog.vue';
import DialogTransferAdiminClue from '@/components/dialog/DialogTransferAdiminClue.vue';
import DrawerMixin from './mixin';
export default {
  components: {
    ProductList,
    ContactList,
    SalesTeamList,
    ContractList,
    VisitList,
    AttachList,
    ProgressLog,
    ProgressBusinessStatus,
    ProgressBusiness,
    ApprovalBusinessInfo,
    FormBusinessList,
    TableBusinessNode,
    DialogTransferAdiminClue,
  },
  mixins: [DrawerMixin],
  data() {
    return {
      visibleTransfer: false,
      visibleDrawer: false,
      operationLogInformation: [], //操作日志请求返回的信息
      nodeFlowChartList: [],
    };
  },

  computed: {
    form() {
      return this.detail || {};
    },
    footerButtons() {
      if (this.detail.transferStatus !== '1') {
        return [
          {
            key: 'submit',
            label: '提交',
            type: 'primary',
            authKey: 'clue-follow-button-business',
          },
          {
            key: 'transfer',
            label: '转派销售',
          },
          {
            key: 'retweet',
            label: '转他人处理',
            authKey: 'clue-follow-button-transfer',
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      } else {
        return [
          {
            key: 'submit',
            label: '提交',
            type: 'primary',
            authKey: 'clue-follow-button-business',
          },
          {
            key: 'retweet',
            label: '转他人处理',
            authKey: 'clue-follow-button-transfer',
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        val && this.handleChangeIcon();
        val && this.getProNode();
      },
      immediate: true,
    },
  },
  methods: {
    // 操作日志
    async handleChangeIcon() {
      const res = await getOperationLog('business', this.detail.opportunityNo);
      this.operationLogInformation = res.data.data;
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    // 审批流程图
    async getProNode() {
      const res = await getProcessNode(
        this.processId,
        'business_stage_process_node'
      );
      this.nodeFlowChartList = res?.data?.data || [];
      console.log(res, '-------1');
    },
    //提交
    async submitCallback() {
      const data = this.$refs.approval?.form || {};
      if (typeof data.approveStatus !== 'boolean') {
        this.$message.error('请先进行审批！');
        return;
      }
      if (data.approveStatus === false && !data.approveOpinion) {
        this.$message.error('请填写阶段说明！');
        return;
      }
      if (!data.approveStatus) {
        // console.log(data.approveStatus, '---');
      } else {
        if (!data.handleUser[0]) {
          this.$message.error('请先选择负责人！');
          return;
        }
      }
      const formatData = {
        handleResult: data.approveStatus ? 0 : 1,
        handleRemark: data.approveOpinion,
        handleUserId: data.handleUserId,
        nodeCode: data.nodeCode,
        handleUserName: data.handleUserName,
        lose: data.approveStatus
          ? undefined
          : {
              item: data.leseDetail,
              category: data.leseLevel,
              remark: data.reason,
            },
        attachmentId: data.list[data.list.length - 1]?.id,
      };
      const opinion = formatData.handleResult;
      const res = await postBusinessAudit({
        ...formatData,
        id: this.planId,
      });
      if (res.data.success) {
        if (opinion) {
          await postCreateOrUpdate({
            bizModule: 'biz',
            currStatus: '5',
            id: this.processId,
            bizType: '4',
          });
        }
        this.$message.success('提交成功！');
        this.closeCallback();
      }
    },
    //转他人处理
    retweetCallback() {
      this.visibleTransfer = true;
    },
    // 返回
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    // 转派销售
    async transferCallback() {
      try {
        await this.$confirm('请确认是否转派销售？');
        // 获取流程id
        const res = await postCreateOrUpdate({
          bizModule: 'biz',
          currStatus: '2',
          bizType: '5',
        });
        const processId = res.data.data;
        await postBusinessTransfer({
          opportunityNo: this.detail.opportunityNo,
          processId,
          bizType: '5',
        });
        this.$message.success('转派成功');
        this.onClose();
      } catch (error) {
        // console.log(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100vh - 110px);
  overflow-y: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 24px;
}

/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.btn {
  position: absolute;
  right: 20px;
  top: 7px;
}
</style>
